<template>
  <div id="tablebox">
    <div class="hearder-search">
      <el-col :span="24" class="breadcrumb-container input-val-box">
        <div class="input-top">
          <el-input v-model="searchWord" placeholder="填写通知标题" @keyup.enter.native="searchBtn"></el-input>
        </div>
        <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search" ></i>搜索</el-button>
        <el-button type="success" size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
      </el-col>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c"
                :height="tableHeight"
                type="expand"
                :default-expand-all="expandAll">
          <el-table-column
                  prop="created"
                  label="通知时间"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="通知标题">
          </el-table-column>
          <el-table-column
                  label="通知内容"
          :show-overflow-tooltip="overflowTooltip">
            <template slot-scope="scope">
              <div v-html="scope.row.content"></div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="users"
                  label="通知人员"
                  width="150">
            <template slot-scope="scope">
              <div class="namebox" :title="scope.row.users">{{scope.row.users}}</div>
            </template>
          </el-table-column>
          <el-table-column
                  label="操作"
                  width="80">
            <template slot-scope="scope">
              <el-button size="small" @click="handleEdit(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
              background
              layout="prev, pager, next"
              :total="pageTotal"
              :page-size="pageSize"
              @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <!--编辑界面-->
    <!--<div v-if="editForm">-->
    <el-dialog title="消息详情" :visible.sync="editFormVisible" :close-on-click-modal="false"
               :close-on-press-escape="false" :before-close="handleClose">
      <el-form :model="editForm" label-width="100px" ref="editForm">
        <el-form-item label="消息标题:" prop="return_time">
          {{editForm.name}}
        </el-form-item>
        <el-form-item label="通知时间:" prop="return_time">
          {{editForm.created}}
        </el-form-item>
        <el-form-item label="消息内容:" prop="return_time">
          <div v-html="editForm.content" class="contentTitle"></div>
        </el-form-item>
        <el-form-item label="通知人员:" prop="return_time">
          {{editForm.users}}
        </el-form-item>
        <el-form-item label="已读人员:" prop="return_time">
          {{editForm.read_user}}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="resetForm">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
    <!--</div>-->
    <!--删除咨询框-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
      <span>你确定删除这本图书: <span class="bookname">{{bookName}}</span></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="DetelBook()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        expandAll: false,
        searchWord: '', // 搜索名称
        editLoading: false, // 编辑界面按键缓存
        editForm: {}, // 编辑界面数据
        addLoading: false,
        overflowTooltip: true,
        editFormVisible: false, // 编辑界面是否显示
        arryList: null, // 数据列表
        pageTotal: 0, // 总页数
        dialogVisible: false, // 删除咨询页
        bookName: '', // 删除书名
        bookEtelId: '', // 删除书名id
        tieleName: '',
        tableHeight: 450,
        page: 1,
        pageSize: 20,
        handleSelection: null, // checked选中框
        applyBookBox: {}, // 选中图书信息
        applyBookBoxInit: {} // 本页面对应对象
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      // 初始化
      InitFn () {
        console.log('获取通讯信息')
        let _this = this
        this.$fetch('tips/index', {p: this.page}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.arryList = response.list.data
            this.pageTotal = response.list.total
            let applyBookBoxInit = {}
            for (let i = 0; i < response.list.data.length; i++) {
              applyBookBoxInit[response.list.data[i].id] = response.list.data[i]
            }
            this.applyBookBoxInit = applyBookBoxInit
            _this.$nextTick(function () {
              _this.checked() // 每次更新了数据，触发这个函数即可。
            })
            this.tableHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 200
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 搜索
      searchBtn () {
        console.log(this.searchWord)
        this.$fetch('book/index', {name: this.searchWord}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.arryList = response.list.data
            this.pageTotal = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 分页
      handleSizeChange (val) {
        this.page = val
        console.log(val)
        this.InitFn()
      },
      // 编辑
      handleEdit (row) {
        this.editForm = row
        this.editFormVisible = true
      },
      // 点击全选
      selectAll (val) {
        // 全选所有跟空值，即使页面已经选择2项
        console.log('点击全选', val)
        console.log(val) // 所有选中值
        let applyBookBox = this.applyBookBox
        if (val.length !== 0) {
          // this.handleSelection = val
          for (let i = 0; i < val.length; i++) {
            if (!applyBookBox[val[i].id]) {
              // 不存在图书
              applyBookBox[val[i].id] = val[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i = 0; i < this.arryList.length; i++) {
            if (this.applyBookBox[this.arryList[i].id]) {
              // 存在图书删除
              delete applyBookBox[this.arryList[i].id]
            }
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      },
      // 点击单选
      selectFnBox (val) {
        // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
        console.log('本页面的列表数据', this.applyBookBoxInit)
        console.log('点击单选', val)
        let applyBookBox = this.applyBookBox
        if (val.length !== 0) {
          // 有选项 对本页面的选项进行比对
          let valBox = {}
          for (let i = 0; i < val.length; i++) {
            valBox[val[i].id] = val[i]
          }
          for (let i in this.applyBookBoxInit) {
            if (valBox[i]) {
              // 存在图书删除
              applyBookBox[i] = this.applyBookBoxInit[i]
            } else {
              delete applyBookBox[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i in this.applyBookBoxInit) {
            delete applyBookBox[i]
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      },
      // 删除图书
      deleteFn (key) {
        delete this.applyBookBox[key]
      },
      // 提交数据
      editSubmit () {
        // 验证信息
        let _self = this
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            console.log('提交信息')
            _self.submitBook()
            console.log('提交数据data', _self.editForm)
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 提交新增，编辑书籍
      submitApply () {
        // 判断新增 编辑
        console.log('图书信息', this.applyBookBox)
        if (JSON.stringify(this.applyBookBox) !== '{}') {
          let _self = this
          let bookName = ''
          for (let i in this.applyBookBox) {
            bookName += (i + ',')
          }
          this.$post('read/add', {book_name: bookName.substring(0, bookName.length - 1), admin_name: this.user_id }).then((response) => {
            console.log(response)
            if (response.code === 0) {
              this.applyBookBox = {} // 更新视图对象
              _self.$alert('申请成功，等待管理员准备图书，到图书馆领取！', {
                confirmButtonText: '确定',
                callback: action => {
                }
              })
            } else {
              console.log('请求失败')
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          this.$message.error('请选择申请的图书')
        }
      },
      // 设置默认选中
      checked () {
        console.log('默认选项判断', this.applyBookBox)
        for (let i = 0; i < this.arryList.length; i++) {
          if (this.applyBookBox[this.arryList[i].id]) {
            console.log('数值', i)
            this.$refs.table.toggleRowSelection(this.arryList[i], true)
          }
        }
      },
      // 重置验证
      resetForm () {
        console.log('取消')
        this.editFormVisible = false
        this.$refs['editForm'].resetFields()
      },
      handleClose (done) {
        done()
        this.$refs['editForm'].resetFields()
      },
      // 刷新页面
      refreshFn () {
        this.InitFn()
      }
    },
    mounted () {
      console.log('表格距离浏览器可用高度顶部的距离', this.$refs.multipleTable.$el.offsetTop)
      console.log('计算table高度：', window.innerHeight - this.$refs.multipleTable.$el.offsetTop)
      // this.tableHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 110
      // this.clientHeight = document.body.clientHeight
      const _this = this
      window.onresize = function temp () {
        console.log('屏幕高度')
        _this.tableHeight = window.innerHeight - _this.$refs.multipleTable.$el.offsetTop - 200
      }
    }
  }
</script>

<style lang="scss">
  .applyBox {
    border: 1px solid #eee;
    border-radius: 3px;
    width: 100%;
    padding: 10px;
    overflow: hidden;
    span{
      margin-bottom:10px;
    }
    .titlebook {

    }
    .box-span {
      border: 1px solid #409EFF;
      color: #fff;
      background: #409EFF;
      display: inline-block;
      border-radius: 3px;
      padding: 5px 10px;
      cursor: pointer;
      position: relative;
      margin-right: 10px;
      i {
        position: absolute;
        top: -10px;
        right: -10px;
        display: block;
        width: 20px;
        height: 20px;
        font-style: normal;
        background: #F56C6C;
        border-radius: 10px;
        text-align: center;
        color: #fff;
        line-height: 20px;
      }
    }
  }
  .namebox{
    height: 44px;
  }
  #tablebox {
    display: flex;
    flex-direction: column;
  }

  .el-table {
    color: #000;
  }
  .contentTitle{
    line-height: 1.3;
    max-height: 300px;
    overflow-y: auto;
    img{
      width: 100%;
      margin:5px 0
    }
  }
  //td{
  //  img{
  //    width: 20px;
  //    height: 20px;
  //  }
  //}
  .right-box .container .main .content-container .input-val-box .input-top {
    width: 250px;
  }

</style>
